<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 顶部 -->
        <div class="top">
          <el-form :model="form" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input
                    v-model="form.keyword"
                    type="text"
                    size="small"
                    placeholder="根据文章标题搜索"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="状态:">
                  <el-select
                    v-model="form.state"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.state"
                      :label="item.title"
                      :value="item.state"
                    >
                    </el-option>
                  </el-select>
                  <el-button size="small" @click="Clearform">清除</el-button>
                  <el-button type="primary" size="small" @click="handleSearch"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button
                    icon="el-icon-edit"
                    size="small"
                    type="success"
                    @click="addArticles(null)"
                    >新增技巧</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- 提示信息 -->
          <el-alert
            v-if="cResultTip"
            :title="cResultTip"
            type="info"
            :closable="false"
            show-icon
            class="alert"
          ></el-alert>
        </div>
        <!-- 表格数据 -->
        <el-table :data="depts">
          <el-table-column
            align="center"
            sortable="custom"
            label="序号"
            width="120"
            type="index"
            prop="id"
          >
          </el-table-column>
          <el-table-column width="400" label="文章标题">
            <template #default="{ row }">
              {{ row.title }}
              <a
                v-if="row.videoURL"
                @click="openVideo(row.videoURL)"
                class="el-icon-film"
              ></a>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            align="center"
            label="阅读数"
            prop="visits"
         />
          <el-table-column align="center" label="录入人" prop="username" />
          <el-table-column
            label="录入时间"
            align="center"
            prop="createTime"
            sortable
          >
            <template #default="{ row }">
              <span>{{ parseTime(row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="state" label="状态" width="120">
            <template #default="{ row }">
              {{ row.state ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column align="center" width="180" label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="previewArticles(row)"
                >预览</el-button
              >
              <el-button @click="changeStateById(row)" type="text">{{row.state ? '禁用' : '启用'}}</el-button>
              <el-button type="text" @click="addArticles(row.id)" :disabled="row.state === 1"
                >修改</el-button>
              <el-button type="text" @click="delArticles(row.id)" :disabled="row.state === 1"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-col :span="8">
            <div class="pagination" v-show="counts">
              <div class="pages">
                <el-pagination
                  background
                  @size-change="hSizeChange"
                  @current-change="hCurrentChange"
                  :current-page="form.page"
                  :total="counts"
                  :page-size="form.pagesize"
                  :page-sizes="[10, 20, 30, 50]"
                  layout="sizes, prev, pager, next, jumper"
                ></el-pagination>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 视频弹层 -->
    <div v-if="videoURL" class="videoPlay">
      <div class="close" @click="closeVideo">
        <span class="el-icon-close"></span>
      </div>
      <div class="videobox">
        <meta name="referrer" content="never">
        <video
          ref="video"
          autoplay="autoplay"
          controls="controls"
          :src="videoURL"
        ></video>
      </div>
    </div>
    <!-- 新增-修改弹层 -->
    <articles-add
      :articlesById="articlesById"
      :showAddDialog.sync="showAddDialog"
      @closeAddDialog="closeAddDialog"
    ></articles-add>
    <!-- 预览弹层 -->
    <articles-preview
      :showPreviewDialog.sync="showPreviewDialog"
      :previewarticlesById="previewarticlesById"
    ></articles-preview>
  </div>
</template>

<script>
import { list, remove, detail, changeState } from '@/api/hmmm/articles'
import { parseTime } from '@/utils/index.js'
import ArticlesAdd from '../components/articles-add'
import ArticlesPreview from '../components/articles-preview'
export default {
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  data () {
    return {
      previewarticlesById: null, // 预览对象
      parseTime: parseTime, // 时间格式化
      // 当前数据
      depts: [], // 面试技巧列表
      // 新增文章弹层
      showAddDialog: false,
      // 预览文章弹层
      showPreviewDialog: false,
      // 状态
      options: [
        { title: '启用', state: 1 },
        { title: '禁用', state: 0 }
      ],
      // 查询表单中的参数
      form: {
        id: null, // 当前行id
        keyword: '', // 输入框
        state: null, // 下拉框状态
        page: 1, // 当前页数
        pagesize: 10 // 每页条数
      },
      counts: 0, // 面试题总数
      state: null, // 状态
      videoURL: null, // 视频地址
      articlesById: {} // 当前行文章内容
    }
  },
  created () {
    this.getArticlesList()
  },
  computed: {
    cResultTip () {
      return `共 ${this.counts} 条记录`
    }
  },
  methods: {
    // 切换状态
    async changeStateById (row) {
      this.form.id = row.id
      if (row.state === 0) {
        this.state = 1
      } else {
        this.state = 0
      }
      try {
        await changeState({ ...this.form, state: this.state })
        this.$message.success('操作成功')
        this.form = {
          id: null, // 当前行id
          keyword: '', // 输入框
          state: null, // 下拉框状态
          page: 1, // 当前页数
          pagesize: 10 // 每页条数
        }
        this.getArticlesList()
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 预览文章
    previewArticles (row) {
      this.showPreviewDialog = true
      this.previewarticlesById = row
      console.log(this.previewarticlesById)
    },
    // 清除表单
    Clearform () {
      this.form = {
        id: null, // 当前行id
        keyword: '', // 输入框
        state: null, // 下拉框
        page: 1, // 当前页数
        pagesize: 10 // 每页条数
      }
    },
    // 模糊搜索
    handleSearch () {
      // 防抖处理: 降低模糊搜索的请求的频次
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 将页码重置为第一页
        this.form.page = 1
        // 调用文章列表接口
        this.getArticlesList()
      }, 300)
    },
    // 关闭新增弹层 刷新数据
    closeAddDialog () {
      this.getArticlesList()
    },
    // 新增-修改
    async addArticles (id) {
      if (id) {
        this.form.id = id
        const { data } = await detail({ id: this.form.id })
        this.articlesById = data
      }
      this.showAddDialog = true
    },
    // 删除
    async delArticles (id) {
      this.$confirm('此操作将永久删除该文章，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击确定执行的代码
        try {
          await remove({ id })
          this.$message.success('删除成功')
          this.getArticlesList()
        } catch (error) {
          this.$message.error(error)
        }
      }).catch(() => {
        // 点击取消执行的代码
      })
    },
    // 打开视频
    openVideo (video) {
      this.videoURL = video
      this.$nextTick(() => {
        this.$refs.video.play()// 播放
      })
    },
    // 关闭视频
    closeVideo () {
      this.videoURL = null
    },
    // 更改每页显示的条数
    hSizeChange (val) {
      this.form.pagesize = val
      if (this.form.page === 1) {
        this.getArticlesList()
      }
    },
    // 点击某一个页码
    hCurrentChange (curPage) {
      this.form.page = curPage
      this.getArticlesList()
    },
    // 获取文章列表数据
    async getArticlesList () {
      const { data } = await list(this.form)
      // console.log(data)
      this.depts = data.items
      this.counts = data.counts
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.el-icon-film {
  color: #0000ff;
}
.pagination {
  margin-top: 10px;
}
::v-deep .top {
  margin-bottom: 20px;
  .el-form-item {
    display: inline-block;
    .el-button {
      margin-left: 5px;
    }
    .el-input__inner {
      width: 200px;
    }
  }
}
.videoPlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}
.close {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
}
.videobox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
}
video {
  width: 100%;
  height: 100%;
}
</style>
